<template>
	<div class="css-text">
		<h2>高度类</h2>
		<div class="fo-Gray mt10">一些使用高度的css类封装</div>

		<h4 class="mt40">高度/最大高度/百分比</h4>
		<codeBox :list='list1'></codeBox>
		
		
		<h4 class="mt40">行高/继承</h4>
		<codeBox :list='list2'></codeBox>
		
		<h4 class="mt40">100vh高度 超出滚动</h4>
		<codeBox :list='list3'></codeBox>
		
	</div>
</template>

<script>
	import codeBox from '@/views/components/codeBox.vue'
	export default {
		components:{
			codeBox
		},
		data() {
			return {
				list1:[
					
					{cssGroup: "height:10px;",class: "hei-10"},
					{cssGroup: "max-height:10px;",class: "max-hei-10"},
					{cssGroup: "min-height:10px;",class: "min-hei-10"},
					{cssGroup: "height:10%;",class: "hei-per-10"},
					{cssGroup: "height:100%;",class: "hei1p"},
					{cssGroup: "max-height:10%;",class: "max-hei-per-10"},
					{cssGroup: "min-height:10%;",class: "min-hei-per-10"},
				],
				list2:[
					{cssGroup: "height: inherit;",class: "hei-inh"},
					{cssGroup: "line-height:10px;",class: "lin-hei-10"},
				],
				
				list3:[
					{cssGroup: `
						height: 100vh;
						overflow: scroll;
						box-sizing: border-box;
					`,class: "hei-1vh-scr"}
				],
				
			}
		}
	}
</script>

<style lang="less" scoped>
	
</style>
